<template>
  <div>
    <el-row :gutter="20" class="hmBox">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox1">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6"><div class="hmIco"><img src='static/images/hmBox1Ico1.png' /></div></el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">余额</h3>
                <p class="hmNum"><span>739.00</span>¥</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox2">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6"><div class="hmIco"><img src='static/images/hmBox1Ico2.png' /></div></el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">展示次数</h3>
                <p class="hmNum"><span>4870</span>次</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-badge class="mark hmTip" :value="3" />
        <el-card shadow="always" class="homeBox homeBox3">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6"><div class="hmIco"><img src='static/images/hmBox1Ico3.png' /></div></el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">广告投放已通过</h3>
                <p class="hmNum"><span>20</span>条</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-badge class="mark hmTip" :value="1" />
        <el-card shadow="always" class="homeBox homeBox4">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6"><div class="hmIco"><img src='static/images/hmBox1Ico4.png' /></div></el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">广告投放未通过</h3>
                <p class="hmNum"><span>3</span>条</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="hmBot">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" class="hmRig">
        <div class="hmRigBg"><img src="static/images/hmRigImg.png"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="16" class="hmLef">
        <div class="hmLefBg">
          <el-row type="flex" justify="center" class="hmLefCon">
              <el-col :xs="24" :sm="12" :md="12" class="hmLefItem">
                <a class="hmLink" href="#">
                  <div class="hmBotImg flexCon">
                    <span><img src="static/images/hmBotImg1.png"></span>
                    <div class="hmBotHov"><img src="static/images/hmBotImg1a.png"></div>
                  </div>
                  <div class="hmBotRig">
                    <h3 class="hmName">新建广告</h3>
                    <div class="hmBrief">
                      <p>点这里引导你创建新的广告</p>
                    </div>
                    <el-button size="medium" round class="hmBotBtn">立即创建</el-button>
                  </div>
                </a>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" class="hmLefItem">
                <a class="hmLink" href="#">
                  <div class="hmBotImg flexCon">
                    <span><img src="static/images/hmBotImg2.png"></span>
                    <div class="hmBotHov"><img src="static/images/hmBotImg2a.png"></div>
                  </div>
                  <div class="hmBotRig">
                    <h3 class="hmName">广告管理</h3>
                    <div class="hmBrief">
                      <p>点这里引导你管理投放的广告</p>
                    </div>
                    <el-button size="medium" round class="hmBotBtn">立即查看</el-button>
                  </div>
                </a>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" class="hmLefItem">
                <a class="hmLink" href="#">
                  <div class="hmBotImg flexCon">
                    <span><img src="static/images/hmBotImg3.png"></span>
                    <div class="hmBotHov"><img src="static/images/hmBotImg3a.png"></div>
                  </div>
                  <div class="hmBotRig">
                    <h3 class="hmName">商家账户</h3>
                    <div class="hmBrief">
                      <p>点这里引导你查看账户信息</p>
                    </div>
                    <el-button size="medium" round class="hmBotBtn">立即填写</el-button>
                  </div>
                </a>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" class="hmLefItem">
                <a class="hmLink" href="#">
                  <div class="hmBotImg flexCon">
                    <span><img src="static/images/hmBotImg4.png"></span>
                    <div class="hmBotHov"><img src="static/images/hmBotImg4a.png"></div>
                  </div>
                  <div class="hmBotRig">
                    <h3 class="hmName">充值</h3>
                    <div class="hmBrief">
                      <p>点这里进行余额充值</p>
                    </div>
                    <el-button size="medium" round class="hmBotBtn">立即充值</el-button>
                  </div>
                </a>
              </el-col>
            </el-row>
          </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { homeInfo } from "@/api/home"
export default {
  name: "Dashboard",
  data() {
    return {
      message: ""
    }
  },
  created() {
    // homeInfo().then((data)=>{
    //   this.message = data.userName;
    // })
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.flexCon{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-pack:center; -webkit-flex-flow:column wrap; -ms-flex-flow:column wrap; flex-flow:column wrap; align-items:center;}
.hmItem{ position: relative; margin-bottom: 35px;padding-left: 17px !important;padding-right: 17px !important;}
.homeBox{ width:100%; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; color: #ffffff;  padding: 50px 10px; border-radius: 10px;}
.homeBox1{ background-image: url('/static/images/hmBox1Bg1.jpg');}
.homeBox2{ background-image: url('/static/images/hmBox1Bg2.jpg');}
.homeBox3{ background-image: url('/static/images/hmBox1Bg3.jpg');}
.homeBox4{ background-image: url('/static/images/hmBox1Bg4.jpg');}
.hmTip{ position:absolute; right: 0; top: 0; z-index: 1; border-radius: 50%;}
.hmTip .el-badge__content{ width: 45px; height: 45px; border-radius: 50%; border-width: 5px; line-height: 35px; font-size: 25px;}
.hmIco{ padding-right: 10px; padding-top: 5px;}
.hmIco img{ max-width: 100%;}
.hmTit1{ font-size: 20px; margin: 5px auto; font-weight: normal;}
.hmNum{ font-size: 20px; margin: 5px auto;}
.hmNum span{ margin-right: 5px; font-size: 37px;}
.hmBot{ margin-bottom: 20px;}
.hmRig{ position:absolute; right: 0; top: 0; min-height: 320px; height: 100%; padding-left: 30px !important;}
.hmRigBg{ overflow: hidden; height: 100%; box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.1); background: url('/static/images/hmRigBg.jpg') left bottom #ffffff no-repeat; border-radius: 15px;}
.hmRigBg img{ float: right; width: 73%; max-width: 340px;}
.hmLefBg{ background: #ffffff; box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.1); padding: 50px 5%; border-radius: 15px;}
.hmLefCon{ flex-wrap: wrap; overflow: hidden;}
.hmLefItem{ padding: 50px 20px; border-bottom:1px dashed #d6dddb; border-right:1px dashed #d6dddb; margin-right: -1px;}
.hmLefItem:nth-child(2n){ border-right: none; padding-left: 6%;}
.hmLefItem:nth-child(1),.hmLefItem:nth-child(2){ padding-bottom: 70px;}
.hmLefItem:nth-last-child(1),.hmLefItem:nth-last-child(2){ border-bottom: none; padding-top: 70px;}
.hmLink{ display: block; overflow: hidden;}
.hmBotImg{ float: left; position: relative; width: 129px; height: 129px; margin-right: 20px; background: #fbf0e5; border-radius: 50%; transition:all 0.3s linear;}
.hmBotImg span{ display: block; width: 100%;}
.hmBotImg img{ display: block; margin: 0 auto; max-width: 52%;}
.hmBotHov{ position:absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); opacity: 0; transition:all 0.3s linear;}
.hmBotRig{ overflow: hidden;}
.hmName{ font-size: 25px; color: #333333; font-weight: normal; margin: 5px 0; transition:all 0.3s linear;}
.hmBrief{ font-size: 16px; color: #969fa9;}
.hmBotBtn{ color: #fd8239; border-color: #fd8239; transition:all 0.3s linear;}
.hmBotBtn:hover,.hmBotBtn:focus,.hmBotBtn:active{ color: #fd8239; border-color: #fd8239; background: #ffeade;}

@media screen and (min-width: 991px) {
  .hmLink:hover .hmBotImg{
    background: -webkit-linear-gradient(left, #faba62 , #ff6322);
    background: -o-linear-gradient(right, #faba62, #ff6322);
    background: -moz-linear-gradient(right, #faba62, #ff6322);
    background: linear-gradient(to right, #faba62 , #ff6322);}
  .hmLink:hover .hmBotImg > img{ opacity: 0;}
  .hmLink:hover .hmBotHov{ opacity: 1;}
  .hmLink:hover .hmName{ color: #fe7630;}
  .hmLink:hover .hmBotBtn{ color: #fd8239; border-color: #fd8239; background: #ffeade;}
  
}
@media screen and (max-width: 1600px) {
  .homeBox{ padding: 30px 10px;}
  .hmTip .el-badge__content{ width: 35px; height: 35px; border-width: 4px; line-height: 27px; font-size: 18px;}
  .hmTit1{ font-size: 16px;}
  .hmNum{ font-size: 16px;}
  .hmNum span{ font-size: 24px;}
  .hmLefBg{ padding: 40px 15px;}
  .hmLefItem{ padding: 30px 15px;}
  .hmBotImg{ width: 110px; height: 110px;}
  .hmName{ font-size: 22px;}
  .hmBrief{ font-size: 14px;}
  .hmLefItem:nth-child(1), .hmLefItem:nth-child(2){ padding-bottom: 50px;}
  .hmLefItem:nth-last-child(1), .hmLefItem:nth-last-child(2){ padding-top: 50px;}
  .hmItem{ position: relative; margin-bottom: 30px;padding-left: 15px !important;padding-right: 15px !important;}
}
@media screen and (max-width: 1400px) {
  .homeBox{ padding: 15px 10px;}
  .hmTip .el-badge__content{ width: 28px; height: 28px; border-width: 2px; line-height: 24px; font-size: 14px;}
  .hmTit1{ font-size: 16px;}
  .hmNum{ font-size: 16px;}
  .hmNum span{ font-size: 24px;}
  .hmLefBg{ padding: 25px 15px;}
  .hmLefItem:nth-child(1), .hmLefItem:nth-child(2){ padding-bottom: 40px;}
  .hmLefItem:nth-last-child(1), .hmLefItem:nth-last-child(2){ padding-top: 40px;}
  .hmLefItem:nth-child(2n){ padding-left: 5%;}
  .hmBotImg{ width: 90px; height: 90px;}
  .hmItem{ position: relative; margin-bottom: 25px;padding-left: 12px !important;padding-right: 12px !important;}
}
@media screen and (max-width: 1199px) {
  .hmRig{ position:static; min-height: 0; padding-left: 10px !important; margin-bottom: 10px;}
  .hmRigBg{ min-height: 250px; background-size: contain;}
  .hmRigBg img{ width: 40%; max-width: 200px;}
}
@media screen and (max-width: 768px) {
  .breadcrumbLocation[data-v-6beed8bc]{ padding: 10px 15px;}
  .homeBox{ padding: 0;}
  .hmItem{ margin-bottom: 10px;}
  .hmLefItem{ padding: 30px 15px !important; border: none !important; border-bottom: 1px dashed #d6dddb !important;}
  .hmLefItem:last-child{ border: none !important;}
  .hmItem{ position: relative; margin-bottom: 20px;padding-left: 11px !important;padding-right: 11px !important;}
}
@media screen and (max-width: 460px) {
  .hmRigBg{ min-height: 0; padding-bottom: 50px;}
  .hmLefBg{ padding: 10px;}
  .hmLefItem{ padding: 15px 0 !important;}
  .hmBotImg{ width: 70px; height: 70px; margin-right: 15px;}
  .hmName{ font-size: 18px;}
}
</style>
